import React from 'react'
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Qrcode,List} from 'weaver-mobile';
import {toJS} from 'mobx';

@withRouter
@inject ('applicationStore')
@observer
class InvoiceAssistant extends React.Component {
    constructor(props){
        super(props);

    }

    componentDidMount() {
       const {applicationStore,info} = this.props;
       const {getbillingAssistantSetPage} = applicationStore;

       getbillingAssistantSetPage({ id:info.id });
    }

    render() {
        const {applicationStore} = this.props;
        const {billDetails} = applicationStore;
        let comment = '';
        if(JSON.stringify(billDetails) != '{}'){
            comment = 
                <div className={'application-details'}>
                    <img src={'/images/fna/fnaMobile/kou.png'} width='100%'/>
                    <div className={'application-details-content'}>
                        <div className={'qrcodeCss'}>
                            {<Qrcode text={billDetails.url} />}
                            {billDetails.tip}
                        </div>
                        <div><img src={'/images/fna/fnaMobile/line.png'} width="100%"/></div>
                        {
                            billDetails.data.map(items =>{
                                return (
                                    <List className="my-list">
                                        <List.Item multipleLine extra={items.value}>{items.key} </List.Item>
                                    </List>
                                )
                            })
                        }
                    </div>

                </div>
        }
        return comment
    }






}

export default InvoiceAssistant;